<template>
  <div>
    <vue-seamless-scroll :data="listData" class="warp">
      <ul class="item">
        <li v-for="(item, index) in listData" :key="index">
          <span class="title" v-text="item.title"></span>
          <span class="date" v-text="item.date"></span>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
export default {
  name: "ListScroll",
  data() {
    return {
      listData: [
        {
          title: "震惊！四川省某女子竟然！！！",
          date: "2016-5-14",
        },
        {
          title: "是人性的沦丧！还是道德的败坏？",
          date: "2025-3-1",
        },
        {
          title: "江西神秘赶尸匠现世？！！",
          date: "2017-12-16",
        },
        {
          title: "放假通知：连休3天，不调休！高速免费",
          date: "2024-7-30",
        },
        {
          title: "女篮姑娘！王思雨、李梦在四川买房！",
          date: "2023-1-24",
        },
        {
          title: "西藏警方：刑拘174人",
          date: "2020-4-15",
        },
        {
          title: "快讯！重庆传来新消息！",
          date: "2014-7-27",
        },
        {
          title: "普京就乌克兰问题发表言论！",
          date: "2025-2-16",
        },
        {
          title: "李嘉诚要卖港口 港澳办转发锐评",
          date: "2025-3-15",
        },
      ],
    };
  },
};
</script>

<style scoped>
.warp {
  height: 3.375rem;
  width: 4.5rem;
  margin: 0 auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      display: block;
      height: .375rem;
      line-height: .375rem;
      display: flex;
      justify-content: space-between;
      font-size: .1875rem;
    }
  }
}
</style>
